/* eslint-disable */
export default {
    props: {
        title: {
            type: String,
            default: '',
        },
        percent: {
            type: [Number, String],
            default: 0
        },
    },
    data() {
        return {
            width: 400,
            height: 400,
            radius: 100,
            showPercent: 0,
            timer: -1,
            grayColor: '#ddd',
            // percentVal: 80,
        };
    },
    watch: {
        percent(val) {
            if (val > 0) {
                this.drawAnimate();
            } else if (val < 0){
                this.showPercent = val;
            } else {
                this.showPercent = 0;
            }
        },
    },
    computed: {
        svgD() {
            if (this.percent <= 0) {
                return '';
            }
            const w = this.width;
            const cX = w / 2;
            const cY = w / 2;
            const angle = this.showPercent * 360 / 100;
            const radius = this.radius;
            let outerX = w;
            let outerY = w;
            let radian = 0; // 大、小弧度
            if (angle <= 90) {
                outerX = cX + radius * Math.sin(angle * Math.PI / 180);
                outerY = cY - radius * Math.cos(angle * Math.PI / 180);
            } else if (angle > 90 && angle <= 180) {
                outerX = cX + radius * Math.cos((angle - 90) * Math.PI / 180);
                outerY = cY + radius * Math.sin((angle - 90) * Math.PI / 180);
            }
            else if (angle > 180 && angle <= 270) {
                outerX = cX - radius * Math.sin((angle - 180) * Math.PI / 180);
                outerY = cY + radius * Math.cos((angle - 180) * Math.PI / 180);
                radian = 1;
            } else {
                outerX = cX - radius * Math.cos((angle - 270) * Math.PI / 180);
                outerY = cY - radius * Math.sin((angle - 270) * Math.PI / 180);
                radian = 1;
            }
            // A rx ry x-axis-rotation large-arc-flag sweep-flag x y
            // x-axis-rotation（x轴旋转角度）
            // large-arc-flag决定弧线是大于还是小于180度，0表示小角度弧，1表示大角度弧
            // sweep-flag表示弧线的方向，0表示从起点到终点沿逆时针画弧，1表示从起点到终点沿顺时针画弧
            if (this.showPercent === 100) {
                return `M ${cX} ${cY} 
                    L ${cX} ${cY - radius}
                    A ${radius} ${radius}, 0, ${radian}, 1, ${cX} ${cY + radius} 
                    A ${radius} ${radius}, 0, ${radian}, 1, ${outerX} ${outerY} 
                    Z`;
            } else {
                return `M ${cX} ${cY} 
                    L ${cX} ${cY - radius}
                    A ${radius} ${radius}, 0, ${radian}, 1, ${outerX} ${outerY} 
                    Z`;
            }
        },
    },
    methods: {
        drawAnimate() {
            this.timer = setInterval(() => {
                if (this.showPercent < this.percent) {
                    this.showPercent += 1;
                } else {
                    clearInterval(this.timer);
                }
            }, 1000 / this.percent);
        },
    },
    created() {
        if (this.percent > 0) {
            this.drawAnimate();
        } else if(this.percent < 0){
            this.showPercent = this.percent;
        } else {
            this.showPercent = 0;
        }
    },
};



